<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="show"
    destroy-on-close
    top="30vh"
    v-dialogDrag
    v-el-drag-dialog
    @close="close"
    width="60%"
  >
    <div style="border: 1px solid #409eff;border-radius: 10px;padding: 20px 10px;">
      <el-form :model="editData" label-position="right" label-width="130px" ref="editDialogRef" size="mini">
        <el-row>
          <el-col :span="8">
            <el-form-item label="箱号：" prop="ctrNo">
              <el-input maxlength="50" placeholder="请输入" v-model="editData.ctrNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="铅封号：" prop="sealNo">
              <el-input maxlength="50" placeholder="请输入" v-model="editData.sealNo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="一程船航名航次：" prop="oneBoat">
              <el-input maxlength="30" placeholder="请输入" v-model="editData.oneBoat"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开船时间：" prop="oneBoatTime">
              <el-date-picker placeholder="请输入" type="date" value-format="yyyy-MM-dd" v-model="editData.oneBoatTime" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <!--<el-col :span="8">-->
          <!--  <el-form-item label="实际到港时间：" prop="oneBoatATA">-->
          <!--    <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="editData.oneBoatATA" clearable></el-date-picker>-->
          <!--  </el-form-item>-->
          <!--</el-col>-->
          <el-col :span="8">
            <el-form-item label="中转港：" prop="oneTransit">
              <el-input maxlength="30" placeholder="请输入" v-model="editData.oneTransit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="二程船船名航次：" prop="towBoat">
              <el-input maxlength="30" placeholder="请输入" v-model="editData.towBoat"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开船时间：" prop="twoBoatTime">
              <el-date-picker placeholder="请输入" type="date" value-format="yyyy-MM-dd" v-model="editData.twoBoatTime" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <!--<el-col :span="8">-->
          <!--  <el-form-item label="实际到港时间：" prop="twoBoatATA">-->
          <!--    <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="editData.twoBoatATA" clearable></el-date-picker>-->
          <!--  </el-form-item>-->
          <!--</el-col>-->
          <el-col :span="8">
            <el-form-item label="中转港：" prop="twoTransit">
              <el-input maxlength="30" placeholder="请输入" v-model="editData.twoTransit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="三程船船名航次：" prop="threeBoat">
              <el-input maxlength="30" placeholder="请输入" v-model="editData.threeBoat"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预计到港时间：" prop="threeBoatTime">
              <el-date-picker placeholder="请输入" type="date" value-format="yyyy-MM-dd" v-model="editData.threeBoatTime" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实际到港时间：" prop="twoBoatATA">
              <el-date-picker placeholder="请输入" type="date" value-format="yyyy-MM-dd" v-model="editData.twoBoatATA" clearable></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <span class="dialog-footer" slot="footer">
      <el-button @click="close" plain size="mini" type="primary">关闭</el-button>
      <el-button @click="save" size="mini" type="primary">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'batchDialog',
  props: {
    show: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    editList: Array
  },
  data() {
    return {
      editData: {
        oneBoat: undefined,
        oneBoatTime: undefined,
        oneBoatATA: undefined,
        oneTransit: undefined,
        towBoat: undefined,
        twoBoatTime: undefined,
        twoBoatATA: undefined,
        twoTransit: undefined,
        threeBoat: undefined,
        threeBoatTime: undefined,
        ctrNo: '',
        sealNo: ''
      }
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    save() {
      const filterObj = {}
      for (const pro in this.editData) {
        if (this.editData[pro]) {
          filterObj[pro] = this.editData[pro]
        }
      }
      this.editList.forEach(item => {
        Object.assign(item, filterObj)
      })
      this.$refs['editDialogRef'].resetFields()
      this.close()
    }
  }
}
</script>

<style scoped></style>
